<template>
  <div class="ma-content-block">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm">
      <!-- 搜索区 tableSearch -->
      <template #tableSearch>
      </template>

      <!-- Table 自定义渲染 -->
    </sa-table>

    <!-- 编辑表单 -->
    <edit-form ref="editRef" @success="refresh" />
  </div>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { Message } from '@arco-design/web-vue'
import EditForm from './edit.vue'
import api from '../api/dashboard'

// 引用定义
const crudRef = ref()
const editRef = ref()

// 搜索表单
const searchForm = ref({
})


// SaTable 基础配置
const options = reactive({
  api: api.getPageList,
  rowSelection: { showCheckedAll: true },
  add: {
    show: true,
    auth: ['/dataDashboard/dataDashboard/save'],
    func: async () => {
      editRef.value?.open()
    },
  },
  edit: {
    show: true,
    auth: ['/dataDashboard/dataDashboard/update'],
    func: async (record) => {
      editRef.value?.open('edit')
      editRef.value?.setFormData(record)
    },
  },
  delete: {
    show: true,
    auth: ['/dataDashboard/dataDashboard/destroy'],
    func: async (params) => {
      const resp = await api.delete(params)
      if (resp.code === 200) {
        Message.success(`删除成功！`)
        crudRef.value?.refresh()
      }
    },
  },
})

// SaTable 列配置
const columns = reactive([
  { title: '总企业数', dataIndex: 'total_enterprise_count', width: 180 },
  { title: '规划面积（单位：km²）', dataIndex: 'planned_area', width: 180 },
  { title: '已建面积（单位：km²）', dataIndex: 'built_area', width: 180 },
  { title: '产业工人数量', dataIndex: 'industrial_worker_count', width: 180 },
  { title: '成交数量（单位：笔）', dataIndex: 'transaction_volume', width: 180 },
  { title: '成交金额', dataIndex: 'transaction_amount', width: 180 },
  { title: '四上企业数', dataIndex: 'high_tech_enterprise_count', width: 180 },
  { title: '制造企业数', dataIndex: 'manufacturing_enterprise_count', width: 180 },
  { title: '国家高新技术企业数', dataIndex: 'national_high_tech_enterprise_count', width: 180 },
  { title: '外资企业数', dataIndex: 'foreign_invested_enterprise_count', width: 180 },
  { title: '其他企业数', dataIndex: 'other_enterprise_count', width: 180 },
  { title: '专精特新中小企业数', dataIndex: 'specialized_and_sophisticated_sme_count', width: 180 },
  { title: '专精特新小巨人企业数', dataIndex: 'specialized_and_sophisticated_little巨人_count', width: 180 },
  { title: '创新性中小企业企业数', dataIndex: 'innovative_sme_count', width: 180 },
  { title: '市级单项冠军数', dataIndex: 'municipal_singular_leader_count', width: 180 },
  { title: '瞪羚企业数', dataIndex: 'gazelle_enterprise_count', width: 180 },
  { title: '国家级单项冠军数', dataIndex: 'national_singular_leader_count', width: 180 },
  { title: '独角兽企业数', dataIndex: 'unicorn_enterprise_count', width: 180 },
  { title: '上市公司数', dataIndex: 'listed_company_count', width: 180 },
  { title: '园区品牌', dataIndex: 'park_brand', width: 180 },
  { title: '园区发展图片路径（可存储上传图片后的文件路径）', dataIndex: 'park_development_image', type: 'image', width: 120 },
])

// 页面数据初始化
const initPage = async () => {}

// SaTable 数据请求
const refresh = async () => {
  crudRef.value?.refresh()
}

// 页面加载完成执行
onMounted(async () => {
  initPage()
  refresh()
})
</script>
